import React, { Component } from 'react'
import List from './List'
import Input from './input'

export default class Todolist extends Component {
    state = {list: JSON.parse(localStorage.getItem("key")) || []}
    addItem = (e)=>{
        if(e.keyCode==13){
            let val = e.target.value;
            this.setState( {list: [val, ...this.state.list]}, ()=>{
                localStorage.setItem("key", JSON.stringify(this.state.list));
            })
            e.target.value = '';
        }
    }
    delItem = (idx)=>{
        this.setState( {list: this.state.list.filter((_/*下划线站位*/,index)=>idx!=index)} , ()=>{
            localStorage.setItem("key", JSON.stringify(this.state.list));
        })

    }
    render(){
      const {list} = this.state;
      return(
        <div className="App">
          <Input addItem={this.addItem}/>
          <List data={list} delItem={this.delItem}/>
        </div>
      );
    }
}
